<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>02-删除留言案例</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			body {
				padding: 100px;
			}

			textarea {
				width: 200px;
				height: 100px;
				border: 1px solid pink;
				outline: none;
				resize: none;
			}

			ul {
				margin-top: 50px;
			}

			li {
				width: 300px;
				padding: 5px;
				background-color: rgb(245, 209, 243);
				color: red;
				font-size: 14px;
				margin: 15px 0;
			}

			li a {
				float: right;
			}
		</style>
	</head>
	<textarea name="" id=""></textarea>
	<button>发布</button>
	<ul>

	</ul>
	<body>
		<script type="text/javascript">
			//1.获取元素
			var btn = document.querySelector("button");
			var text = document.querySelector("textarea");
			var ul = document.querySelector("ul");
			//2.注册事件
			btn.onclick = function() {
				if (text.value == '') {
					alert('您没有输入内容');
					return false;
				} else {
					// console.log(text.value);
					// (1) 创建元素
					var li = document.createElement('li');
					// 先有li 才能赋值
					//阻止链接跳转
					li.innerHTML = text.value + "<a href='javascript:;'>删除</a>";
					// (2) 添加元素
					// ul.appendChild(li);
					ul.insertBefore(li, ul.children[0]);
					// (3) 删除元素 删除的是当前链接的li  它的父亲
					var as = document.querySelectorAll('a');
					for (var i = 0; i < as.length; i++) {
						as[i].onclick = function() {
							// node.removeChild(child); 删除的是 li 当前a所在的li  this.parentNode;
							ul.removeChild(this.parentNode);
						}
					}
				}
			}
		</script>

	</body>
</html>
